//useEffect是在渲染被绘制到屏幕之后执行的，是异步的；useLayoutEffect是在渲染之后但在屏幕更新之前，是同步的。
/*大部分情况下我们采用useEffect,性能更好。但当你useEffect里面的操作需要处理DOM，并且会改变页面的样式，就需要用useLayoutEffect，
否则可能会出现闪屏问题*/
    

import { useRef, useState } from "react";
import { useLayoutEffect } from "react";

export default function App() {
    const ref = useRef(null)
    const [msg,setMsg] = useState('Hello UseLayoutEffect')
    useLayoutEffect(() => {
        for (let i = 0; i < 1000; i++){ 
            console.log('1');
            
        }
        setMsg('UseLayoutEffect Hello')
    },[msg])
    return (
        <>
            <h1 ref={ref}>UseLayoutEffect</h1>
            {msg}
        </>
    )
}

// import { useEffect} from "react";
// export default function UseLayoutEffect() {
//     const ref = useRef(null)
//     useEffect(() => {
//         console.log('useEffect',ref.current);
//     })
//     useLayoutEffect(() => {
//         console.log('useLayoutEffect',ref.current);
//     })
//     return (
//         <>
//             <h1 ref={ref}>UseLayoutEffect</h1>
//         </>
//     )
// }


// export default function UseLayoutEffect() {
//     const ref = useRef(null)
//     const [msg,setMsg] = useState('Hello UseLayoutEffect')
//     useEffect(() => {
//         for (let i = 0; i < 1000; i++){
//             console.log('1');
            
//         }
//         setMsg('UseLayoutEffect Hello')
//     },[msg])
//     return (
//         <>
//             <h1 ref={ref}>UseLayoutEffect</h1>
//             {msg}
//         </>
//     )
// }
